<!--
 * @Author: sunli
 * @Date: 2024-02-20 09:47:59
 * @LastEditors: sunli
 * @LastEditTime: 2024-02-28 18:56:21
 * @FilePath: /debug/src/views/errorDetail/index.vue
 * @Description: 
-->
<template>
	<div class="project-detail">
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>异常详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
		<div class="main">
      <div>

      </div>
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="基本信息" name="base">
          <!-- 基本信息 -->
            <el-descriptions :column="1" title="概要信息">
              <el-descriptions-item label="时间">{{dayjs(errorInfo.name).format('YYYY年MM月DD日 HH点mm分ss秒')}}</el-descriptions-item>
              <el-descriptions-item label="类型">{{errorInfo.type}}</el-descriptions-item>
              <el-descriptions-item label="Title">{{errorInfo.title}}</el-descriptions-item>
              <el-descriptions-item label="URL">{{errorInfo.url}}</el-descriptions-item>
              <el-descriptions-item label="设备信息">{{errorInfo.userAgent}}</el-descriptions-item>
            </el-descriptions>
            <br>
            <el-descriptions :column="1" title="堆栈信息">
              <el-descriptions-item v-if="errorInfo.errorType === 'resourceError'">资源未找到 {{ errorInfo.filename}}</el-descriptions-item>
              <el-descriptions-item v-else>
                {{ errorInfo.message }}<br>
                <template v-if="errorInfo.stack">at {{ errorInfo.stack}}</template>
              </el-descriptions-item>
            </el-descriptions>
            <br>
            <el-descriptions :column="1" title="错误信息">
              <el-descriptions-item label="名称">{{errorInfo.errorType}}</el-descriptions-item>
              <el-descriptions-item label="信息">{{errorInfo.message || errorInfo.filename}}</el-descriptions-item>
              <el-descriptions-item label="文件">{{errorInfo.filename}}</el-descriptions-item>
              <el-descriptions-item label="行列号">{{errorInfo.position}}</el-descriptions-item>
            </el-descriptions>
            <br>
        </el-tab-pane>
        <el-tab-pane label="应用信息" name="project">
          <!-- 基本信息 -->
          <div class="baseinfo">
            <el-descriptions title="">
              <el-descriptions-item label="应用名">{{projectInfo.name}}</el-descriptions-item>
              <el-descriptions-item label="语言">{{projectInfo.language}}</el-descriptions-item>
              <el-descriptions-item label="框架">{{projectInfo.type}}</el-descriptions-item>
              <el-descriptions-item label="KEY">{{projectInfo.KEY}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
	</div>
</template>
  
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import httpReq from '@/request'
import useStore from '@/store/index'

const store = useStore()
const router = useRouter()
const route = useRoute()
const userVO = store.userVO

const activeName = ref('base')


onMounted(async() => {
  queryDetail()
})

const errorInfo = ref({})
const projectInfo = ref({})
const queryDetail = async () => {
  errorInfo.value = await httpReq.post('http://localhost:8092/errorReport/queryErrorDaetail', {_id: route.query._id})
  projectInfo.value = await httpReq.post('http://localhost:8092/project/queryByKEY', {KEY: errorInfo.value.KEY})
}
</script>

<style lang="scss" scoped>
.label {
  display: inline-block;
  width: 300px;
}
.el-switch {
  margin-left: 20px;
}
.nav {
  padding: 20px 20px;
}
.main {
  margin: 0 auto;
  padding: 0 20px;
  .report {
    p {
      font-size: 14px;
      font-weight: 500;
    }
    .label {
      font-size: 14px;
      color: #606266;
    }
  }
}
</style>
  